<template>
	<div id="app">
		<input-box @addItem="handleKeyUp"></input-box>
		<list :list="list" @delData="handleClick"></list>
	</div>
</template>

<script>
import InputBox from "./components/InputBox";
import List from "./components/List";
import store from "./common/store"; // 引入store模块

const STORAGE_KEY = "my-key";

export default {
	name: "app",
	components: {
		InputBox,
		List
	},
	data() {
		return {
			list: store.fetch(STORAGE_KEY) ? store.fetch(STORAGE_KEY) : [], // 从本地存储中获取数据
		};
	},
	methods: {
		handleKeyUp(value) {
			this.list.push({
				id: Date.now(),
				value,
				state: '',
			});
		},
		handleClick(ind) {
			this.list.splice(ind, 1);
		}
	},
	watch: {
		/* 
		watch用法 监听List的变化。
		 */
		// 这里监听整个list数据的变化，避免每次修改数据的时候都需要进行本地存储
		list: {
			handler() {
				store.save(this.list, STORAGE_KEY); // 写入本地存储
			},
			deep: true, // 切换为false之后，点击切换状态，刷新看效果，未触发watch。
		},
	}
};
</script>

<style lang="scss" scoped>
#app {
	padding: 30px;
	height: 100%;
	background: #8aba92;
}
</style>
